/* eslint-disable prettier/prettier */
import React, { Component, useState } from 'react';
import { ActivityIndicator, ImageBackground, StatusBar, Text, TouchableHighlight, View } from 'react-native';
import styles from './styles';
import { buttons, handleButtonPress } from './services';


export default class Select extends Component<any> {
   
   state = {
    isLoading:false,
  };

  render() {
    return (
      <ImageBackground
        resizeMode="stretch"
        style={styles.constiner}
        source={require('../../src/image/cpselect_bc.jpg')}>
        <StatusBar 
          hidden={false}
          backgroundColor="black"
          barStyle={ 'light-content'}
        />
        <View style={styles.View}>
          {buttons.map((button) => (
            <TouchableHighlight
              key={button.value} // Ensure each item has a unique key
              style={styles.button}
              onPress={()=>{this.setState({  isLoading: true });handleButtonPress(button.value,this);}}>
              <View style={styles.button}>
                <Text style={styles.buttonTitle}>{button.title}</Text>
              </View>
            </TouchableHighlight>
          ))}
        </View>
      </ImageBackground>
    );
  }
}
